<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>黑色毛衣</li>
        <li>可爱女人</li>
        <li>东风破</li>
        <li>七里香</li>
    </ul>
    <ol>

    </ol>
    <script>
        /*
          语法结构：
           一、on 帮定事件，可以实现事件委托(ul 绑定事件，li 触发)
               1.第一个参数是事件类型
               2.第二个参数是触发的对象
               3.第三个参数是触发的函数
               4.此时 this 是触发的对象
        */
        //    3.可以动态的添加事件
        $(function () {
            $('ul').on('click', 'li,', function () {
                console.log(this);
            });

            // 2.问题：不能动态添加事件
            // $('ul li').click(function(){
            //     console.log(this);
            // })
            var li = $('<li>黑色幽默</li>');
            $('ul').append(li);

        });
    </script>
</body>

</html>